<template>
	<view class="detail">
		<nav-bar title="预警处理" leftArrow />

		<view class="universal-head">
			<view class="universal-head-title">{{ detail.projectItemName }}</view>
			<view class="universal-status"
				:class="detail.status === '4' ? 'universal-status-success' : 'universal-status-warning'">
				{{ detail.statusStr }}
			</view>
		</view>

		<view class="universal-detail">
			<view class="universal-detail-top">
				<view class="universal-detail-top-time">
					<text class="universal-detail-top-title">预警</text>
					{{ detail.alertStartTime }}
				</view>
			</view>

			<view class="universal-detail-cont">
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">预警对象：</view>
					<van-text-ellipsis class="universal-detail-item-cont" :content="detail.projectItemName" />
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">预警类型：</view>
					<van-text-ellipsis class="universal-detail-item-cont" :content="detail.alertTypeName" />
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">预警开始时间：</view>
					<van-text-ellipsis class="universal-detail-item-cont" :content="detail.alertStartTime" />
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">预警结束时间：</view>
					<van-text-ellipsis class="universal-detail-item-cont" :content="detail.autoEndTime || '-'" />
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">预警内容：</view>
					<view class="universal-detail-item-cont">{{ detail.content }}</view>
				</view>
			</view>
		</view>

		<FormAssign v-model="detail" v-if="_isCanOpt && detail.status === '1'" @confirm="getDetail" />
		<DetailAssign v-model="detail" v-if="detail.status !== '1'" />

		<FormHandle v-model="detail" v-if="_isCanOpt && detail.status === '2'" @confirm="getDetail" />
		<DetailHandle v-model="detail" v-if="detail.status === '3' || detail.status === '4'" />

		<FormCheck v-model="detail" v-if="_isCanOpt && detail.status === '3'" @confirm="getDetail" />
		<DetailCheck v-model="detail" v-if="detail.status === '4'" />
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	import dayjs from 'dayjs';

	import FormHandle from './components/FormHandle';
	import FormAssign from './components/FormAssign';
	import FormCheck from './components/FormCheck';

	import DetailHandle from './components/DetailHandle';
	import DetailAssign from './components/DetailAssign';
	import DetailCheck from './components/DetailCheck';

	import {
		apiAlertDetail
	} from '@/api/warningHandle';

	import {
		splitFilesToImageVideo
	} from '@/utils/index';

	import store from '@/store'

	const path = defineProps({
		id: String,
		state: String,
	});

	const userInfo = store.getters.GET_USER_INFO.sysUser;
	const currentUserId = ref(Number(userInfo.userId) || '');
	const detail = ref({});

	const _isCanOpt = computed(() => {
		const todoUsers = detail.value?.todoUsers || [];
		return !!todoUsers.find(it => it == currentUserId.value);
	})

	const getDetail = () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});

		apiAlertDetail({
			alertId: path.id
		}).then(res => {
			const urls = splitFilesToImageVideo(res.convertProcessedPic)
			const {
				state
			} = res;
			detail.value = {
				...res,
				imagesUrl: urls.images || [],
				videosUrl: urls.videos || [],
			}
		}).finally(() => {
			uni.hideLoading();
		});
	};

	getDetail();
</script>

<style lang="scss" scoped>
	@import '@/assets/universal-page.scss';
	@import '@/assets/universal-detail.scss';

	.detail {
		padding-bottom: 20rpx;

		.universal-detail {
			.universal-detail-item {
				width: 100%;
			}
		}
	}
</style>